<template>
  <div class="card_scContainer">
    <span class="card_scStr1">{{ str1 }}</span>
    <span class="card_scStr2">{{ str2 }}</span>
    <span class="card_scStr3">{{ str3 }}</span>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";

defineProps({
  str1: {
    type: String,
    required: false,
    default: i18nt.value.constantsTwo.str5,
  },
  str2: {
    type: String,
    required: false,
    default: i18nt.value.constantsTwo.str6,
  },
  str3: {
    type: String,
    required: false,
    default: i18nt.value.constantsTwo.str7,
  },
});
</script>

<style scoped lang="scss">
.card_scContainer {
  @include relative_hw(135px, 100%);
  flex-direction: column;

  .card_scStr1,
  .card_scStr2,
  .card_scStr3 {
    margin-left: 27px;
  }

  .card_scStr1 {
    margin-top: 20px;
    font-family: "Songti SC", "Songti SC";
    font-weight: 900;
    font-size: 24px;
    text-align: left;
    color: #035db9;
  }
  .card_scStr2 {
    font-family: "Songti SC", "Songti SC";
    font-size: 18px;
    color: #a3a3a3;
    text-align: left;
    margin-top: 6px;
  }

  .card_scStr3 {
    font-family: "Songti SC", "Songti SC";
    font-size: 18px;
    color: #a3a3a3;
    text-align: left;
  }
}
</style>
